<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id='app'>
        <h3>姓名</h3>
        <p>{{name}}</p>
        <h3>年龄</h3>
        <p>{{age}}</p>
    </div>
</body>

</html>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let opt = {
            el: '#app',
            data: {
                name: '检索中...',
                age: 30
            }
        }
        let vm = new Vue(opt)
        setTimeout(() => {
            opt.data.name = '王永峰'
        }, 2000);
    }, false)
    class Vue {
        constructor(opt) {
            this.opt = opt
            this.observe(opt.data)
            let root = document.querySelector(opt.el)
            this.compile(root)
        }
        // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
        observe(data) {
            Object.keys(data).forEach(key => {
                let obv = new Observer()
                data["_" + key] = data[key]
                // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
                Object.defineProperty(data, key, {
                    get() {
                        Observer.target && obv.addSubNode(Observer.target);
                        return data['_' + key]
                    },
                    set(newVal) {
                        obv.update(newVal)
                        data['_' + key] = newVal
                    }
                })
            })
        }
        // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来    
        compile(node) {
            [].forEach.call(node.childNodes, child => {
                if (!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)) {
                    let key = RegExp.$1.trim()
                    child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*' + key + '\\s*\\}\\}',
                        'gm'), this.opt.data[key])
                    Observer.target = child
                    this.opt.data[key]
                    Observer.target = null
                } else if (child.firstElementChild)
                    this.compile(child)
            })
        }
    }
    // 常规观察者类
    class Observer {
        constructor() {
            this.subNode = []
        }
        addSubNode(node) {
            this.subNode.push(node)
        }
        update(newVal) {
            this.subNode.forEach(node => {
                node.innerHTML = newVal
            })
        }
    }
</script>